<template>
  <div>
    <div class="recommend">推荐歌单</div>
    <div class="recommend">最新音乐</div>
    <SongList  v-for="item in newSong" :key="item.id" :name="item.name" :artists="item.song.artists[0].name" :id="item.id" />
  </div>
</template>

<script>
import SongList from '@/components/SongList'
import { getNewSong } from '@/api/recommend'
export default {
  data () {
    return {
      newSong: []
    }
  },

  // 组件注册
  components: {
    SongList
  },

  // 获取到数据和方法
  created () {
    this.getNewSongList()
  },

  // 定义方法
  methods: {
    async getNewSongList () {
      const res = await getNewSong({
        linit: 10
      })
      this.newSong = res.data.result
    }
  }
}
</script>

<style scoped>
.recommend {
  height: 50px;
  line-height: 50px;
  background-color: rgb(224, 79, 79);
  padding: 0 20px;
  color: #fff;
}
</style>
